<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>VIP注册</title>
		<link rel="stylesheet" href="../css/base.css" />
		<style>
			.left{
				float: left;
				margin-left: 100px;
			}
			.right{
				float: right;
				margin-right: 100px;
			}
			.left li{
				float: left;
				width: 120px;
				height: 120px;
				border: 1px solid #ccc;
				text-align: center;
				padding-top: 30px;
				color: #666666;
			}
			.left li:nth-child(2){
				border-left: 1px solid #FFFFFF;
				border-right: 1px solid #FFFFFF;
			}
			.left li:hover{
				border: 3px solid lightseagreen;
			}
			.left li div{
				padding-top: 10px;
				color: lightseagreen;
			}
			.right li{
				margin-bottom: 10px;
			}
			.right input{
				width: 250px;
				height: 30px;
				border: 1px solid #CCCCCC;
				padding-left: 5px;
				font-size: 14px;
			}
			.right .code{
				width: 160px;
			}
			.codeBtn{
				border: 1px solid #CCCCCC;
				line-height: 28px;
				margin-left: 8px;
				width: 82px;
				text-align: center;
				display: inline-block;
			}
			.equity li{
				display: inline-block;
				width: 130px;
				height: 130px;
				border-radius: 50%;
				border: 1px solid lightseagreen;
				text-align: center;
				margin-right: 80px;
				/*padding-top: 25px;*/
				overflow: hidden;
			}
			.equity li:nth-child(4){
				margin-right: 0;
			}
			.equity li h2{
				padding-top: 5px;
				background: lightseagreen;
				color: #FFFFFF;
				height: 40px;
				line-height: 40px;
				margin-bottom: 10px;
			}
			.equity li p{
				color: #666666;
			}
			.equity li p:nth-of-type(3){
				color: lightseagreen;
				padding-top: 10px;
			}
			.pay span{
				display: inline-block;
				border: 1px solid #00BFFF;
				height: 50px;
				width: 100px;
				padding: 5px;
				margin: 10px 0 0 50px;
				border-radius: 7px;
			}
			.pay img{
				width: 100%;
				height: 100%;
			}
			.button{
				color: #FFFFFF;
				background: lightseagreen;
				border:0 !important;
				border-radius: 5px;
			}
			.pop{
				width: 100%;
				height: 100%;
				position: fixed;
				top: 80px;
				left: 0;
				display: none;
			}
			.payPop{
				width: 200px;
				height: 100px;
				background: rgba(0,0,0,.3);
				margin: 200px auto;
				border-radius: 5px;
				text-align: center;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<header>
			<div class="fixedWidth">
				<div class="logo">
					<img src="../img/logo (1).png" alt=""/>
				</div>
				<ul class="headerNav">
					<li><a href="../index.html">首页</a></li>
					<li><a href="vipPrefecture.html">VIP中心</a></li>
					<li><a href="aboutUs.html">关于我们</a></li>
					<li><a href="message.html">信息披露</a></li>
					<li><a href="vipRegister.html">注册VIP会员</a></li>
					<li>
						<span class="loginRegister"><a href="loginRegister.html">登录/注册</a></span>
						<span class="exit"><a href="#">ABC/退出</a></span>						
					</li>
				</ul>
				<div class="clear"></div>
			</div>
		</header>
		<div class="fixedWidth content">
			<div style="padding-top: 60px;">
				<div class="left">
					<h2>会员服务费</h2>
					<div>
						<ul>
							<li>
								<span>7天</span><span class="font12" style="display: inline-block;padding: 0 4px;background: lightseagreen;color: white;border-radius: 5px;margin-left: 5px;">体验</span>
								<div>￥5</div>
							</li>
							<li>
								<span>2年</span><span class="font12" style="display: inline-block;padding: 0 4px;background: lightseagreen;color: white;border-radius: 5px;margin-left: 5px;">推荐</span>
								<div>￥299</div>
							</li>
							<li>
								<span>1年</span>
								<div>￥199</div>
							</li>
						</ul>
					</div>
					<!--<div class="pay">
						<span><img src="../img/u626.png" alt="" /></span>
						<span><img src="../img/u628.png" alt="" /></span>
					</div>-->
				</div>
				<div class="right">
					<h2>开通VIP</h2>
					<div>
						<ul>
							<li><input class="phone" type="text" placeholder="注册手机号"/></li>
							<li><input class="password" type="text" placeholder="6-12位数字字母组合密码"/></li>
							<li><input class="code" type="text" placeholder="短信验证码"/><span class="codeBtn font14">获取验证码</span></li>
							<li>	
								<input class="button" type="button" value="极速开通VIP会员"/>
								<p class="font12" style="color: #666666;text-align: center;">*马上开通VIP，立即尊享专业贴心金融服务</p>
							</li>
						</ul>
					</div>
				</div>
				<div class="clear"></div>
			</div>	
			<div class="equity" style="padding: 30px 100px;">
				<h2 style="padding-bottom: 30px;">4大会员权益  |  Intro</h2>
				<ul>
					<li>
						<h2 class="font16">创新案例</h2>
						<p class="font12">金融创新案例</p>
						<p class="font12">行业创新视点</p>
						<p class="font12">2份/月</p>
					</li>
					<li>
						<h2 class="font16">专属周报</h2>
						<p class="font12">每周重点不mis</p>
						<p class="font12">财富数据手中握</p>
						<p class="font12">1份/周</p>
					</li>
					<li>
						<h2 class="font16">行业速报</h2>
						<p class="font12">1800字行业热点</p>
						<p class="font12">全方位新鲜速递</p>
						<p class="font12">1份/周</p>
					</li>
					<li>
						<h2 class="font16">大咖分享</h2>
						<p class="font12">权威大咖解读热点</p>
						<p class="font12">资深专家实时互动</p>
						<p class="font12">1次/周</p>
					</li>
				</ul>
				<h2 class="font16" style="padding: 30px 0 10px;">开通须知</h2>
				<p class="font12">1.什么时候开始服务？会员资格从付费成功后立即生效，在有效期内可享受所有玖富美好会员专属服务内容。
				<p class="font12">2.玖富美好会员服务为虚拟内容服务，请于购买前详细了解。无法定或约定事由概不退款，在法律给定的合理框架内本公司保留所有事务的最终解释权，敬请理解。</p></p>
			</div>
		</div>
		<footer>
			<div class="fixedWidth">
				<ul class="footerNav">
					<li><a href="contactUs.html">联系我们</a></li>
					<li><a href="disclaimer.html">免责声明</a></li>
					<li><a href="privacyPolicy.html">隐私声明</a></li>
				</ul>
				<div class="copyright">
					<p class="font14">瑞丰保险经纪有限公司版权所有&nbsp;<a href="http://www.miitbeian.gov.cn/">京ICP备18002921号-1</a></p>
					<p class="font14">北京市朝阳区阜通东大街1号院6号楼4层3单元230501</p>
				</div>
			</div>
		</footer>
		<div class="pop">
			<div class="payPop">
				<img src="../img/timg.gif" alt="" style="width: 50px;"/>
				<p class="font12" style="color: #FFFFFF;">正在跳转至第三方支付...</p>
			</div>
		</div>
	</body>
		<script src="../js/isLogin.js"></script>
	<script>
		var oBtn = document.querySelector('.button'),
			oPop = document.querySelector('.pop')
		
		oBtn.addEventListener('click',function(){
			if(phoneVerify(0)&&passwordVerify(0)){
				oPop.style.display='block'
			}
		})

	</script>
</html>
